<template>
  <!-- WelcomeMember 欢迎入会 -->
  <PageContainer>
    <view class="container">
      <Header title="欢迎入会" />
      <FullLoading :fullLoading="isFullLoading" />

      <image style="width: 100%; height: auto" :src="tempFilePath" mode="widthFix" />
      <LPainter
        isCanvasToTempFilePath
        ref="lPainterRef"
        :type="canvasType"
        @success="posterSuccess"
        @fail="posterFail"
        custom-style="position: fixed; left: 200%"
      >
        <LPainterView css="width: 100%; height: 1300rpx; position: reactive;">
          <LPainterImage
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/obs/20221013/c751344036ce45a9abc3f7c44c679dcc.png"
            css="width:100%; height: 1300rpx;"
          />
          <LPainterView
            css="width: 100%; height: 1300rpx; position: absolute; top: 0px; left: 0px;"
          >
            <LPainterImage
              :src="globalConfig?.logo"
              css="width:200rpx; height: 200rpx; position: absolute; top: 284rpx; left: 280rpx;"
            />
            <LPainterText
              css="width: 100%; color:#333333; text-align: center; position: absolute; top: 510rpx; font-size: 40rpx; font-weight: bold;"
              :text="globalConfig?.name"
            />
            <LPainterView
              css="width: 430rpx; height:1px; background: #B47026; position: absolute; top: 612rpx; left: 160rpx;"
            />

            <LPainterText
              css="width: 100%; color:#D78226; text-align: center; position: absolute; top: 666rpx; font-size: 56rpx; font-weight: bold;"
              :text="levelName"
            />
            <LPainterText
              css="width: 80%; color:#333333; text-align: center; position: absolute; top: 762rpx; left: 10%; font-size: 32rpx;"
              :text="proposer"
            />

            <LPainterText
              css="width: 300rpx; color: #808080; position: absolute; top: 1152rpx; left: 10%; font-size: 24rpx;"
              :text="'有效期：' + memberEndTime"
            />
            <LPainterImage
              :src="qrCodeImg"
              css="width:146rpx; height: 146rpx; position: absolute; top: 976rpx; left: 540rpx;"
            />
            <LPainterText
              css="width: 146rpx; color: #808080; text-align: center; position: absolute; top: 1152rpx; left: 540rpx; font-size: 24rpx;"
              text="扫码查看"
            />
          </LPainterView>
        </LPainterView>
      </LPainter>

      <TButtonGroup>
        <TButton
          class="gutter-btn"
          text="完善会员名片"
          custom-class="cardBlackBtn"
          @click="cancel"
        />
        <TButton class="gutter-btn" text="下载会员证" custom-class="cardBtn" @click="submit" />
        <TButton class="gutter-btn" text="查看服务补贴" custom-class="cardBtn" @click="see" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  WelcomeMember  欢迎入会 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import FullLoading from '@/components/FullLoading/index.vue';
  import LPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue';
  import LPainterView from '@/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue';
  import LPainterImage from '@/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue';
  import LPainterText from '@/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue';
  import { ref, reactive } from 'vue';
  import { Toast } from '@/utils';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { memberApply } from '@/api/membership';
  import { navigateTo, onLoad, reLaunch, redirectTo } from '@/router';
  import { createMiniCode } from '@/utils/dynamicConfig';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { useUserStore } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';

  const isFullLoading = ref(true);
  const lPainterRef = ref<LPainterRef>();
  const { currentCocId } = storeToRefs(useUserStore());
  const { globalConfig, canvasType } = useAppStoreWithOut();

  // 获取我的申请记录
  const levelName = ref();
  const proposer = ref();
  const memberEndTime = ref();
  const leadingMemberId = ref<number>(1);
  const companyName = ref();

  const qrCodeImg = ref();

  function __int() {
    memberApply().then(async (r) => {
      if (r) {
        levelName.value = r.levelName;
        proposer.value = r.proposer;
        memberEndTime.value = r?.memberEndTime ?? '';
        leadingMemberId.value = r.leadingMemberId;
        companyName.value = r.companyName;
        qrCodeImg.value = await createMiniCode({
          path: 'personCard',
          query: {
            id: r.leadingMemberId,
          },
        });
      }
    });
  }

  onLoad(() => {
    if (currentCocId.value) {
      __int();
    } else {
      reLaunch({ name: 'selectiveType' })
    }
  });

  // 完善会员名片
  const cancel = () => {
    redirectTo({ name: 'personCard', options: { id: leadingMemberId.value } });
  };

  // 下载会员证
  const tempFilePath = ref();
  const submit = async () => {
    uni.saveImageToPhotosAlbum({
      filePath: tempFilePath.value,
      success: function (res) {
        Toast('下载成功');
      },
      fail: function (err) {
        uni.getSetting({
          success(res) {
            if (res.authSetting['scope.writePhotosAlbum']) {
              Toast('请刷新重试');
            } else {
              uni.showModal({
                title: '提示',
                content: '使用"下载会员证"功能, 需要获取"添加到相册"权限',
                confirmText: '获取权限',
                success: ({ confirm }) => {
                  if (confirm) {
                    uni.openSetting();
                  }
                },
              });
            }
          },
        });
      },
    });
  };

  function see() {
    navigateTo({ name: 'policyServiceReport', options: { name: companyName.value } });
  }

  /** 分享图生成成功回调 */
  function posterSuccess(r: any) {
    tempFilePath.value = r;
    isFullLoading.value = false;
  }
  /** 分享图生成失败回调 */
  function posterFail(err: any) {
    console.error(err);
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
  }
</style>
